<template>
  <a-modal
    title="直播详情"
    :width="1000"
    :visible="visible"
    :confirmLoading="confirmLoading"
    @cancel="handleCancel"
    @ok="handleCancel"
    cancelText="关闭"
    class="pop-table pop-title-bg-white"
    :closable="false">

    <a-row style="text-align: center;margin-top:20px">
      <a-col :span="6">
        <p>
          <span style="font-size: 18px;">当前在线人数：</span>
          <span style="font-size: 24px;font-weight: bold;">{{ current.onlineNumNow }}</span>
        </p>
      </a-col>
      <a-col :span="6">
        <p>
          <span style="font-size: 18px;">峰值人数：</span>
          <span style="font-size: 24px;font-weight: bold;">{{ current.onlineNumPeakValue }}</span>
        </p>
      </a-col>

      <a-col :span="12">
        <div>
          <a-button
            style="background:red;color:#fff;border:none;"
            @click="closePermission"
          >立即关闭直播权限
          </a-button>
        </div>
      </a-col>
    </a-row>
    <a-row style="margin-top:15px;margin-bottom:30px">
      <a-col :span="11" style="background:#F5F5F5;border-radius:5px;border:1px solid #C0C0C0;margin-left:50px">
        <div style="display:flex;justify-content:space-between;">
          <div>
            <a-avatar
              size="large"
              src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png"/>
          </div>
        </div>
        <div style="width:100%;height:400px;margin:30px 0">
          <div id="id_test_video" style="width:100%; height:auto;"></div>
        </div>
      </a-col>
      <a-col :span="11" style="padding-left:50px">
        <div style="width:100%;height:500px;border:1px solid #C0C0C0;">
          <div
            style="width:100%;
            height:40px;
            line-height:40px;
            text-align:center
            ;padding:0 10px;
            background:#F5F5F5;
            border-bottom:1px solid #C0C0C0;
            display:flex;
            justify-content:space-between;">
            <span>{{ commentNum }}评论</span>
            <span @click="open" style="cursor: pointer">
              {{ status ? '隐藏' : '展开' }}
              <a-icon :type="status ? 'down' : 'up'"/>
            </span>
          </div>
          <div
            :class="status ?'open' : 'hide'"
            style="overflow-y: scroll;
            overflow-x: hidden;height:450px;">
            <div v-for="(item,index) in comment" :key="index" style="font-size:18px;margin:10px 0">
              <div style="display:flex; justify-content:space-between;">
                <span>{{ item.commentNickName }}&nbsp;{{ item.commentTime }}</span>
                <span
                  v-if="item.liveEstoppel == 2"
                  style="padding-right:10px;color:blue;cursor: pointer"
                  @click="estoppel(item)"
                >禁言</span>
                <span v-else  @click="unEstoppel(item)" style="padding-right:10px;color:blue;cursor: pointer">解禁</span>
              </div>
              <span>{{ item.commentContent }}</span>
            </div>
            <a-pagination size="small" @change="getCommentData" style="text-align: right"
                          v-model="ipagination.current" :total="ipagination.total"
                          show-less-items/>
          </div>
        </div>
      </a-col>
    </a-row>
  </a-modal>
</template>

<script>
  import {getAction, postAction} from '@/api/manage'

  let player;
  export default {
    data() {
      return {
        visible: false,
        confirmLoading: false,
        status: true,
        data: {},
        commentNum: 0,
        current: {},
        comment: [],
        ipagination: {
          current: 1,
          total: 0
        },
      }
    },
    methods: {
      detail(data) {
        this.data = data;
        this.visible = true;
        this.getCountData(data);
        this.getCommentData();
        this.getCurrentCountData(data);
        //dom挂载完才能执行一下方法
        this.$nextTick(() => {
          const url = data.broadcastUrl.replace('.flv', '.m3u8');
          player = new TcPlayer('id_test_video', {
            'm3u8': url,
            "flv": data.broadcastUrl, //增加了一个 flv 的播放地址，用于PC平台的播放 请替换成实际可用的播放地址
            "autoplay": true,      //iOS 下 safari 浏览器，以及大部分移动端浏览器是不开放视频自动播放这个能力的
            "poster": data.coverUrl,
            "width": '400',//视频的显示宽度，请尽量使用视频分辨率宽度
            "height": '400'//视频的显示高度，请尽量使用视频分辨率高度
          });
        });
      },
      getCountData(data) {
        getAction('/liveManage/liveInfo/queryLiveCommentByIdCount', {id: data.id}).then(res => {
          if (res.success) {
            this.commentNum = res.result
          }
        })
      },
      getCurrentCountData(data) {
        getAction('/liveManage/liveInfo/queryById', {id: data.id}).then(res => {
          if (res.success) {
            this.current = res.result
          }
        })
      },

      getCommentData(pageNo) {
        if (pageNo === 1) {
          this.ipagination.current = 1;
        }
        getAction('/liveManage/liveInfo/liveCommentlist',
          {
            liveId: this.data.id,
            pageNo: this.ipagination.current,
            pageSize: 10
          }).then(res => {
          if (res.success) {
            this.comment = res.result.records;
            if (res.result.total) {
              this.ipagination.total = res.result.total;
            } else {
              this.ipagination.total = 0;
            }
          }
        })
      },
      closePermission() {
        postAction('/liveManage/liveInfo/forbidLiveStream?id=' + this.data.id + '&streamId=' + this.data.streamId, {}).then(res => {
          if (res.success) {
            this.$message.success("已经关闭该用户直播权限");
            this.close()
          }
        })
      },
      // 禁言
      estoppel(data) {
        getAction('/liveManage/liveInfo/updateLiveEstoppel', {id: data.commentUserId}).then(res => {
          if (res.success) {
            this.$message.success('已经禁止该用户发表评论');
            //刷新评论列表
            this.getCommentData();
          }
        })
      },
      // 解除禁言
      unEstoppel(data) {
        postAction(`/liveManage/liveInfo/updateRelieveEstoppelById?id=${data.commentUserId}`).then(res => {
          if (res.success) {
            this.$message.success('解禁成功');
            //刷新评论列表
            this.getCommentData();
          }
        })
      },
      open() {
        this.status = !this.status
      },
      close() {
        this.$emit('close');
        if (player) {
          player.destroy()
        }
        this.visible = false
      },
      handleOk() {
        this.close()
      },
      handleCancel() {
        this.close()
      }
    }
  }
</script>

<style>
  .open {
    margin-left: 5px;
  }

  .hide {
    display: none;
  }

  .video-player .vjs-custom-skin {
    width: 100%;
    height: 400px;
  }

  .video-js {
    height: 400px !important;
  }

  .vjs-tech {
    width: 100%;
    height: 100%;
  }
</style>
